<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' "> -->
    <title>找师傅APP插件Demo</title>
    <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <header class="header">
      <h1><a class="btn-back" href="./index.html">首页</a>地图</h1>
    </header>
    <div id="map-container"></div>
    <form>
      <ul>
        <li>
          <span>我的坐标:</span>
          <br/>
          <span class="my-point"></span>
          <br/>
          <br/>
          <span>目标坐标:</span><input type="text" class="target-point" value="113.326558,23.157203"/>
        </li>
        <br/>
        <li>
          <input type="button" value="更新" class="update">
        </li>
      </ul>
    </form>
    <script type="text/javascript" src="../cordova.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FOYX7rrbfGVN5EVG5bXGLBZB"></script>
    <script type="text/javascript">
        document.addEventListener('deviceready', function() {
          var noop = function(){
            alert('stop')
          }
          window.locationService.getCurrentPosition(function(e){
            alert(e)
          },function(e){
            alert(e);
            var pos = JSON.parse(e);
            var map = new BMap.Map("map-container");
            var point = new BMap.Point(pos.lontitude, pos.latitude);
            var convertor = new BMap.Convertor();
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            map.addControl(new BMap.NavigationControl());
            map.centerAndZoom(point, 15);
            document.querySelector('.my-point').innerHTML = '' + pos.lontitude + ' , ' + pos.latitude;
            document.querySelector('.update').addEventListener('click', function() {
              var targetPoint = document.querySelector('.target-point').value;
              // var gtPoint = new BMap.Point(targetPoint.split(',')[0], targetPoint.split(',')[1]);
              var a = targetPoint.split(',')[0] + ',' + targetPoint.split(',')[1];

              var xhr = new XMLHttpRequest();
              xhr.onreadystatechange = function(){
          　　　　if ( xhr.readyState == 4 ) {
          　　　　　　if ( xhr.status == 200 ) {
                      alert(xhr.responseText)
                      var data = JSON.parse(xhr.responseText);
                      if (data.status == 0) {
                        var tPoint = new BMap.Point(data.result[0].x, data.result[0].y)
                        var polyline = new BMap.Polyline([
                          point,
                         	tPoint
                        ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
                        var marker = new BMap.Marker(tPoint);
                        map.addOverlay(marker);
                        map.addOverlay(polyline);
                      }
                    } else {
                      alert('error: ', xhr.responseText)
                    }
          　　　　}
          　　 };
              xhr.open('GET', 'http://api.map.baidu.com/geoconv/v1/?ak=FOYX7rrbfGVN5EVG5bXGLBZB&coords=' + targetPoint.split(',')[0] + ',' + targetPoint.split(',')[1]);
      　　     xhr.send();
            })

          });
          // var onSuccess = function(position) {
          //     alert('Latitude: '          + position.coords.latitude          + '\n' +
          //           'Longitude: '         + position.coords.longitude         + '\n' +
          //           'Altitude: '          + position.coords.altitude          + '\n' +
          //           'Accuracy: '          + position.coords.accuracy          + '\n' +
          //           'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
          //           'Heading: '           + position.coords.heading           + '\n' +
          //           'Speed: '             + position.coords.speed             + '\n' +
          //           'Timestamp: '         + position.timestamp                + '\n');
          //
          //     var map = new BMap.Map("map-container");
          //     // 23.1397571,113.31434314
          //     // 23.1430503337,113.3262433900
          //
          //     // var polyline = new BMap.Polyline([
          //   	// 	new BMap.Point(116.399, 39.910),
          //   	// 	new BMap.Point(116.405, 39.920),
          //   	// 	new BMap.Point(116.425, 39.900)
          //   	// ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
          //
          //     // var y = position.coords.latitude;
          //     // var x = position.coords.longitude;
          //
          //     var y = 23.1572038;
          //     var x = 113.3265582;
          //
          //     var ggPoint = new BMap.Point(x, y);
          //     var convertor = new BMap.Convertor();
          //     // var pointArr = [];
          //     // map.addControl(new BMap.NavigationControl());
          //     // pointArr.push(ggPoint);
          //     document.querySelector('.update').addEventListener('click', function() {
          //       var targetPoint = document.querySelector('.target-point').value;
          //       var gtPoint = new BMap.Point(targetPoint.split(',')[0], targetPoint.split(',')[1]);
          //       pointArr.push(gtPoint);
          //       pointTranslate()
          //     })
          //     // var translateCallback = function(data) {
          //     //   if (data.status === 0) {
          //     //     var point = new BMap.Point(data.points[0].lng, data.points[0].lat);
          //     //     var marker = new BMap.Marker(point);
          //     //     map.addOverlay(marker);
          //     //     map.centerAndZoom(data.points[0], 15);
          //     //     document.querySelector('.my-point').innerHTML = '' + data.points[0].lng + ' , ' + data.points[0].lat
          //     //   }
          //     // }
          //     var pointTranslate = function(pointArr, cb) {
          //       var convertor = new BMap.Convertor();
          //       convertor.translate(pointArr, 1, 5, cb)
          //     }
          //
          //     var mapInit = function(pointArr) {
          //       pointTranslate(pointArr, function(data) {
          //         if (data.status === 0) {
          //           var point = new BMap.Point(data.points[0].lng, data.points[0].lat);
          //           var marker = new BMap.Marker(point);
          //           map.addOverlay(marker);
          //           map.centerAndZoom(data.points[0], 15);
          //           document.querySelector('.my-point').innerHTML = '' + data.points[0].lng + ' , ' + data.points[0].lat
          //         }
          //       })
          //     }
          //     mapInit([ggPoint])
          // };
          //
          // // onError Callback receives a PositionError object
          // //
          // function onError(error) {
          //     alert('code: '    + error.code    + '\n' +
          //           'message: ' + error.message + '\n');
          // }
          //
          // navigator.geolocation.getCurrentPosition(onSuccess, onError);

        }, false)

    </script>
  </body>
</html>
